<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月21日 12:53:45
-->
<template>
  <div class="homePage">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="32">
          <a-col :md="6" :sm="8">
            <a-form-item label="分类">
              <a-select v-model="classId" placeholder="请选择分类">
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in imgtabList"
                  :key="index"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="审核状态">
              <a-select v-model="homeImgAudit" placeholder="请选择审核状态">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">已审核</a-select-option>
                <a-select-option :value="2">待审核</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin: 15px 0">
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-button @click="searchQuery" type="primary" icon="search">查询</a-button>
            <a-button
              @click="searchReset"
              type="primary"
              icon="reload"
              style="margin-left: 8px"
              >重置</a-button
            >
          </span>
        </a-row>
      </a-form>
    </div>
    <div class="shenheKaiguan">
      审核开关：
      <a-radio-group v-model="radioValue" @change="radioChange">
        <a-radio :value="false">审核关闭</a-radio>
        <a-radio :value="true">审核开启</a-radio>
      </a-radio-group>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      style="height: 100%"
      :pagination="ipagination"
      :rowKey="
        (record, index) => {
          return record.brNo + '-' + index;
        }
      "
      :loading="loading"
    >
      <span slot="imgUrl" slot-scope="imgUrl" class="imgUrl">
        <img
          :src="baseUrl + imgUrl"
          alt
          preview="1"
          width="30px"
          height="30px"
          title="查看"
        />
      </span>
      <span slot="classId" slot-scope="classId">{{ classimg(classId) }}</span>
      <span slot="tags" slot-scope="tags">
        <a-tag :color="tags == true ? 'volcano' : 'green'">{{
          tags == false ? "已审核" : "待审核"
        }}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record" class="actone">
        <a-popconfirm
          title="确定删除图片？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteImg(record)"
          @cancel="cancel"
        >
          <a-icon type="delete" title="删除" />
        </a-popconfirm>
        <a-popconfirm
          title="确定通过审核？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="shenhe(record, false)"
          style="margin: 0 10px"
          v-if="record.homeImgAudit"
          @cancel="cancel"
        >
          <a-icon type="check" title="通过审核" />
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
export default {
  name: "homePage",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    const columns = [
      {
        title: "图片",
        dataIndex: "url",
        key: "url",
        align: "center",
        scopedSlots: { customRender: "imgUrl" },
      },
      {
        title: "上传人",
        dataIndex: "creatUserName",
        align: "center",
        key: "creatUserName",
      },

      {
        title: "分类",
        dataIndex: "classId",
        align: "center",
        key: "classId",
        scopedSlots: { customRender: "classId" },
      },
      {
        title: "审核状态",
        key: "homeImgAudit",
        dataIndex: "homeImgAudit",
        align: "center",
        scopedSlots: { customRender: "tags" },
      },
      {
        title: "操作",
        key: "action",
        align: "center",
        scopedSlots: { customRender: "action" },
      },
    ];
    return {
      columns,
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      data: [],
      classId: "",
      homeImgAudit: "",
      radioValue: false,
      imgtabList: [],
      homeImgAudit: "",
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["5", "10", "15"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizlevelServiceModalhanger: true,
        total: 0,
        onChange: (pageIndex) => {
          this.ipagination.current = pageIndex;
          this.getlist();
        },
        onShowSizlevelServiceModalhange: (current, pageSize) => {
          console.log(current, pageSize);
          this.ipagination.pageSize = pageSize;
          this.ipagination.current = 1;
          this.getlist();
        },
      },
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {
    this.getimgtab();
    this.getaudit();
    this.getlist();
  },
  /**所有方法*/
  methods: {
    cancel(e) {},
    searchQuery() {
      this.getlist();
    },
    searchReset() {
      this.classId = "";
      this.homeImgAudit = "";
      this.getlist();
    },
    getlist() {
      let params = {
        pageSize: this.ipagination.pageSize,
        pageIndex: this.ipagination.current,
        classId: this.classId,
        homeImgAudit: this.homeImgAudit == 1 ? false : this.homeImgAudit == 2 ? true : "",
      };
      this.loading = true;
      requset("post", "/homeImg/admin/list", params).then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.data.list;
          this.ipagination.total = res.data.data.count;
          this.loading = false;
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    getaudit() {
      requset("get", "/homeImg/admin/getaudit", {}).then((res) => {
        if (res.data.code == 200) {
          this.radioValue = res.data.data[0].homeImgAudit;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 查询分类列表
    getimgtab() {
      requset("get", "/imageTab/list", {}).then((res) => {
        if (res.data.code == 200) {
          this.imgtabList = res.data.data;
          this.imgtabList.unshift({ id: "", name: "全部" });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    radioChange(e) {
      requset("post", "/homeImg/admin/setaudit", {
        homeImgAudit: e.target.value,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getaudit();
          this.radioValue = e.target.value;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    classimg(e) {
      let str = "";
      this.imgtabList.forEach((item) => {
        if (e == item.id) {
          str = item.name;
        }
      });
      return str;
    },
    // 审核
    shenhe(item, homeImgAudit) {
      let params = {
        imgId: item.imgId,
        homeImgAudit,
      };
      requset("post", "/homeImg/admin/imgsetaudit", params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getlist();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 删除
    deleteImg(item) {
      let params = {
        imgId: item.imgId,
        url: item.url,
      };
      requset("post", "/homeImg/admin/deleteImg", params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getlist();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
::v-deep .ant-form-inline .ant-form-item {
  width: 100%;
}
::v-deep .ant-form-item-control-wrapper {
  width: 70%;
}
.actone {
  color: #1890ff;
  font-size: 15px;
  cursor: pointer;
}
.shenheKaiguan {
  margin-bottom: 10px;
}
.imgUrl {
  cursor: pointer;
}
</style>
